﻿@{
    ViewBag.MainMenu = "Settings";
    ViewBag.LeftMenu = "AutoReply";

    ViewBag.Title = "自动回复";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .divImageMaterialContainer {
        width: 170px;
        background-color: #FFF;
    }

    .tableImageMaterialContainer {
        width: 100%;
        border-collapse: collapse;
        border: solid #E7E7EB;
        border-width: 1px 0 0 1px;
    }

        .tableImageMaterialContainer td {
            border: 1px solid #E7E7EB;
        }

    .divArticleMaterialContainer {
        width: 230px;
        background-color: #FFF;
        font-size: 13px;
    }

    .tableArticleMaterialContainer {
        width: 100%;
        border-collapse: collapse;
        border: solid #E7E7EB;
        border-width: 1px 0 0 1px;
    }

        .tableArticleMaterialContainer td {
            border: 1px solid #E7E7EB;
        }

    .tableNoBorder {
        border: 0px;
    }

        .tableNoBorder td {
            border: 0px;
        }

    .divFirstArticleTitle {
        position: absolute;
        line-height: 24px;
        padding-left: 7px;
        vertical-align: middle;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 24px;
        background-color: #000000;
        color: white;
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
    }

    .divArticleFirstItem {
        border: 2px solid #FFF;
        position: relative;
        height: 100px;
    }


    .divArticleItem {
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 5px;
        border: 2px solid #FFF;
    }


    .divArticleItemActive {
        border: 2px solid skyblue;
    }
</style>



<script language="javascript">

    var _validator;

    //AutoReplyOnKeyWordsRuleEntity
    var _rule = new Object();

    $(document).ready(function ()
    {
        var id = getQueryString("id");
        if (id != undefined && id != "")
        {
            $("#spanTitle").html("修改规则");
            loadData(id);
            $("#btnRemove").show();
        }


        _validator = $("#form").validate({
            onfocusout: false,
            onkeyup: false,
            showErrors: showValidationErrors,
            rules: {
                "txtName": "required"
            },
            messages: {
                "txtName": "请输入规则名称；"
            }
        });


    });

    function loadData(id)
    {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Settings/GetAutoReplyOnKeyWordsRule?id=" + id,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR)
            {
                layer.close(loadLayerIndex);
                if (data.Success)
                {
                    _rule = data.Data;

                    $("#txtName").val(_rule.RuleName);
                    $("#selectReplyAll").find("option[value='" + _rule.ReplyAll + "']").attr("selected", true);
                    showKeywordList();
                    showContentList();

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function save()
    {
        if (_validator.form() == false)
        {
            return;
        }

        if (_rule.KeywordList == undefined || _rule.KeywordList == null || _rule.KeywordList.length == 0)
        {
            layerAlert("请添加需要响应的关键字；");
            return;
        }

        if (_rule.ContentList == undefined || _rule.ContentList == null || _rule.ContentList.length == 0)
        {
            layerAlert("请添加需要回复的内容；");
            return;
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        _rule.RuleName = $("#txtName").val();
        _rule.ReplyAll = $("#selectReplyAll").val();

        var url = "/Api/Settings/AddAutoReplyOnKeyWordsRule";

        if (_rule.Id != undefined && _rule.Id != null && _rule.Id != "")
        {
            url = "/Api/Settings/UpdateAutoReplyOnKeyWordsRule";
        }

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: JSON.stringify(_rule),
            success: function (data, status, jqXHR)
            {
                // alert(data);
                layer.close(loadLayerIndex);
                if (data.Success)
                {
                    layerAlert("自动回复已保存，您的设置将在几分钟之内生效。", function ()
                    {
                        window.location.href = "/Settings/AutoReplyOnKeywords";
                    });
                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function removeData()
    {
        if (_rule.Id == undefined || _rule.Id == null || _rule.Id == "")
        {
            return;
        }

        var msg = "是否确认删除？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function ()
        {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Settings/RemoveAutoReplyOnKeyWordsRule?id=" + _rule.Id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR)
                {
                    if (data.Success)
                    {
                        window.location.href = "/Settings/AutoReplyOnKeywords";

                    } else
                    {
                        layer.closeAll();
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest)
                {
                    layer.closeAll();
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    //添加关键字
    function showKeyWordView(index)
    {
        var url = "AutoReplyOnKeywordsKeywordEdit";

        if (index != undefined && index != null)
        {
            url += "?index=" + index;
        }

        layer.open({
            type: 2,
            area: ['540px', '230px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: url
        });
    }

    function getKeyword(index)
    {
        return _rule.KeywordList[index];
    }

    function insertKeyword(keyword, layerIndex)
    {
        layer.close(layerIndex);

        if (_rule.KeywordList == undefined || _rule.KeywordList == null)
        {
            _rule.KeywordList = new Array();
        }

        _rule.KeywordList[_rule.KeywordList.length] = keyword;

        showKeywordList();
    }

    function updateKeyword(index, keyword, layerIndex)
    {
        layer.close(layerIndex);

        _rule.KeywordList[index] = keyword;

        showKeywordList();
    }

    function removeKeyword(index, layerIndex)
    {
        layer.close(layerIndex);

        _rule.KeywordList.splice(index, 1);

        showKeywordList();
    }

    function showTextContentView()
    {
        layer.open({
            type: 2,
            area: ['540px', '300px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'AutoReplyText'
        });
    }

    function insertReplyTextContent(content, layerIndex)
    {
        layer.close(layerIndex);

        if (_rule.ContentList == undefined || _rule.ContentList == null)
        {
            _rule.ContentList = new Array();
        }

        var autoReplyContent = new Object();
        autoReplyContent.Type = 0;
        autoReplyContent.Content = content;

        _rule.ContentList[_rule.ContentList.length] = autoReplyContent;

        showContentList();
    }

    function showMaterialImageSelect()
    {
        //alert(0);
        layer.open({
            type: 2,
            area: ['760px', '450px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: '/Material/ImageSelect'
        });
    }

    function showMaterialArticleSelect()
    {
        //alert(0);
        layer.open({
            type: 2,
            area: ['860px', '550px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: '/Material/ArticleSelect'
        });
    }

    function __selectMaterialImageResult(image, layerIndex)
    {
        if (layerIndex != undefined && layerIndex != null)
        {
            layer.close(layerIndex);
        }

        if (_rule.ContentList == undefined || _rule.ContentList == null)
        {
            _rule.ContentList = new Array();
        }

        var autoReplyContent = new Object();
        autoReplyContent.Type = 1;
        autoReplyContent.Name = image.Name;
        autoReplyContent.Url = image.Url;
        autoReplyContent.MediaId = image.MediaId;

        _rule.ContentList[_rule.ContentList.length] = autoReplyContent;

        showContentList();
    }

    function __selectMaterialArticleResult(id, layerIndex)
    {
        if (layerIndex != undefined && layerIndex != null)
        {
            layer.close(layerIndex);
        }

        if (_rule.ContentList == undefined || _rule.ContentList == null)
        {
            _rule.ContentList = new Array();
        }

        var autoReplyContent = new Object();
        autoReplyContent.Type = 2;
        autoReplyContent.ArticleId = id;

        _rule.ContentList[_rule.ContentList.length] = autoReplyContent;

        showContentList();
    }

    function showContentList()
    {
        if (_rule.ContentList == undefined || _rule.ContentList == null)
        {
            document.getElementById('divContentList').innerHTML = "";
            return;
        }

        var gettpl = document.getElementById('replyContentListTemplate').innerHTML;
        laytpl(gettpl).render(_rule.ContentList, function (html)
        {
            document.getElementById('divContentList').innerHTML = html;

            //加载图文消息
            loadArticleContent();
        });

    }

    function loadArticleContent()
    {
        for (i = 0; i < _rule.ContentList.length; i++)
        {
            if (_rule.ContentList[i].Type == 2)
            {
                loadArticleContentIndex(i, _rule.ContentList[i].ArticleId);
            }
        }
    }

    function loadArticleContentIndex(index, id)
    {
        $.ajax({
            url: "/Api/Material/GetArticleMaterial?id=" + id,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR)
            {
                if (data.Success)
                {
                    //图文素材被删除后返回null
                    if (data.Data != null)
                    {
                        var gettpl = document.getElementById('articleTemplate').innerHTML;
                        laytpl(gettpl).render(data.Data.articles, function (html)
                        {
                            document.getElementById('divContentArticle' + index).innerHTML = html;
                        });
                    } else
                    {
                        document.getElementById('divContentArticle' + index).innerHTML = "指定的图文素材不存在，请确认是否已被删除。";
                    }

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function removeReplyContent(i)
    {
        if (_rule.ContentList == undefined || _rule.ContentList == null)
        {
            return;
        }

        _rule.ContentList.splice(i, 1);

        showContentList();
    }

    function showKeywordList()
    {
        if (_rule.KeywordList == undefined || _rule.KeywordList == null)
        {
            document.getElementById('divKeywordList').innerHTML = "";
            return;
        }

        var gettpl = document.getElementById('keywordListTemplate').innerHTML;
        laytpl(gettpl).render(_rule.KeywordList, function (html)
        {
            document.getElementById('divKeywordList').innerHTML = html;
        });
    }

</script>

<script id="keywordListTemplate" type="text/html">

    {{# for(var i = 0, len = d.length; i < len; i++){ }}

    <div style="float:left; background-color:#eeeeee; cursor:pointer" onclick="showKeyWordView('{{ i }}')">{{ d[i].Keyword }}</div>
    <div style="float:left;">；</div>


    {{# } }}

    <div style="clear:both"></div>
</script>

<script id="replyContentListTemplate" type="text/html">

    {{# for(var i = 0, len = d.length; i < len; i++){ }}

    <div class="divDotLine" style="margin-top:10px;">
    </div>

    {{# if(d[i].Type == 0){ }}
    <div style="margin-top:10px;">
        <div style="float:left">
            {{ d[i].Content }}
        </div>
        <div style="float:right">
            <img src="/Content/Images/ico_remove.jpg" width="20" height="20" style="cursor:pointer" onclick="removeReplyContent('{{ i }}')">
        </div>
        <div style="clear:both"></div>
    </div>
    {{# }else if(d[i].Type == 1){ }}
    <div style="margin-top:10px;">
        <div style="float:left">
            <div class="divImageMaterialContainer">
                <table class="tableImageMaterialContainer">
                    <tr>
                        <td height="150" align="center"><img style="max-width:166px; max-height:100%" src="{{ d[i].Url }}" /></td>
                    </tr>
                    <tr>
                        <td height="30" style="word-wrap: break-word; word-break: break-all; ">
                            <span class="font_gray_15" style="margin-left: 10px; ">{{ d[i].Name }}</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="float:right">
            <img src="/Content/Images/ico_remove.jpg" width="20" height="20" style="cursor:pointer" onclick="removeReplyContent('{{ i }}')">
        </div>
        <div style="clear:both"></div>
    </div>
    {{# }else if(d[i].Type == 2){ }}
    <div style="margin-top:10px;">
        <div id="divContentArticle{{i}}" style="float:left">

        </div>
        <div style="float:right">
            <img src="/Content/Images/ico_remove.jpg" width="20" height="20" style="cursor:pointer" onclick="removeReplyContent('{{ i }}')">
        </div>
        <div style="clear:both"></div>
    </div>
    {{# } }}

    {{# } }}

    <div class="divDotLine" style="margin-top:10px;">
    </div>

</script>

<script id="articleTemplate" type="text/html">

    <div class="divArticleMaterialContainer">
        <table class="tableArticleMaterialContainer">
            <tr>
                <td valign="top">
                    <div>
                        <div>
                            <div class="divArticleFirstItem" >
                            <div style=" position:absolute; left:0px; right:0px; height:100px; overflow:hidden">
                                <img src="{{ d[0].thumbUrl }}" style=" width:100%;">
                            </div>
                            <div class="divFirstArticleTitle">
                                <a style="color:white" target="_blank" href="{{ d[0].url }}">{{ d[0].title }}</a>
                            </div>
                        </div>

                        {{# for(var i = 1, len = d.length; i < len; i++){ }}
                        <div class="divDotLine" style="margin-top:10px;">
                        </div>
                        <div class="divArticleItem">
                            <table class="tableNoBorder" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td>
                                        <a style="color:black" target="_blank" href="{{ d[i].url }}">{{ d[i].title }}</a>
                                    </td>
                                    <td width="75" align="right"><img src="{{ d[i].thumbUrl }}" width="70" height="70"></td>
                                </tr>
                            </table>
                        </div>

                        {{# } }}
                    </div>
                </td>
            </tr>

        </table>
    </div>


</script>


<div id="divContentTips">
    配置公众平台账号，才能让你的店铺与微信公众号关联。   <a href="#">查看详细&gt;</a>
</div>

<div style=" margin-top:20px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_ContentTab" style="width:200px;"><a href="/Settings/AutoReplyOnSubscribe" class="a_black_16">被添加自动回复</a></td>
            <td class="td_ContentTab" style="width:200px;"><a href="/Settings/AutoReplyOnMessage" class="a_black_16">消息自动回复</a></td>
            <td class="td_ContentTab_active" style="width:200px;"><a href="/Settings/AutoReplyOnKeywords" class="a_black_16">关键词自动回复</a></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4" bgcolor="#EEEEEE" height="2"></td>
        </tr>
    </table>
</div>

<div style="margin-left:20px; margin-right:20px;">

    <div style=" margin-top:15px;">
        <span id="spanTitle" class="font_black_24">添加规则</span>
    </div>

    <div style="margin-top:20px; padding-left:10px;">
        <form id="form">
            <table width="100%" border="0" cellpadding="5" cellspacing="0">
                <tr>
                    <td width="120">名称：</td>
                    <td><input id="txtName" name="txtName" type="text" class="input_16" style="width:300px; " maxlength="60" /></td>
                </tr>
                <tr height="20"><td></td></tr>
                <tr>
                    <td valign="top">关键词：</td>
                    <td>
                        <div id="divKeywordList">

                        </div>
                        <div style="margin-top:10px;">
                            <a href="javascript:void(0)" onclick="showKeyWordView()">添加</a>
                        </div>
                    </td>
                </tr>
                <tr height="20"><td></td></tr>
                <tr>
                    <td valign="top">回复：</td>
                    <td>
                        <div>
                            <div id="divTitle_Text" style="float:left; cursor:pointer" onclick="showTextContentView()">
                                <img id="imgTitle_Text" src="/Content/Images/ico_edit.jpg" />
                                <span class="font_gray_16" id="spanTitle_Text">
                                    文字
                                </span>
                            </div>
                            <div id="divTitle_Image" style="float:left; ; cursor:pointer;margin-left:20px;" onclick="showMaterialImageSelect()">
                                <img id="imgTitle_Image" src="/Content/Images/ico_image.jpg" />
                                <span class="font_gray_16" id="spanTitle_Image">
                                    图片
                                </span>
                            </div>
                            <div id="divTitle_Articlea" style="float:left; ; cursor:pointer;margin-left:20px;" onclick="showMaterialArticleSelect()">
                                <img id="imgTitle_Articlea" src="/Content/Images/ico_article.jpg" />
                                <span class="font_gray_16" id="spanTitle_Articlea">
                                    图文
                                </span>
                            </div>
                            <div style="clear:both"></div>
                        </div>

                        <div id="divContentList">



                        </div>

                    </td>
                </tr>
                <tr height="20"><td></td></tr>
                <tr>
                    <td>回复方式 ：</td>
                    <td>
                        <select id="selectReplyAll" name="selectReplyAll" class="input_16" style="width:300px;">
                            <option value="false">随机回复一条</option>
                            <option value="true">回复全部</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div style=" margin-top:25px;">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" style="display:none" onclick="removeData()" />
        <input name="btnSave" type="button" class="btn_blue" id="btnSave" value="保存" onclick="save()" />
    </div>
</div>
